<template>

  <div class="login-container">
    <!-- logo区域 -->
    <div class="logo">
      <img alt="" src="../assets/logo.png">
    </div>

    <!-- 登录表单区域 -->
    <el-form :model="user" :rules="userRules" class="loginform_style" label-width="0px" ref="userForm">
      <el-form-item prop="uname">
        <el-input placeholder="输入您的用户名" prefix-icon="el-icon-user-solid" v-model="user.uname"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input placeholder="输入您的密码" prefix-icon="el-icon-lock" type="password" v-model="user.pwd"></el-input>
      </el-form-item>
      <el-form-item prop="yzm">
        <el-input placeholder="请输入验证码" prefix-icon="el-icon-lock" type="yzm" v-model="user.yzm"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button @click="login" type="primary">登录</el-button>
        <el-button @click="resetForm" type="info">重置</el-button>
      </el-form-item>
    </el-form>


  </div>

</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        user: {
          uname: '',
          pwd: '',
            yzm:''
        },
        userRules: {
          uname: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, message: '请输入6位以上的密码', trigger: 'blur'}
          ],
            yzm:[
                {required: true, message: '请输入验证码', trigger: 'blur'},
                {message: '验证码不能为空', trigger: 'blur'}
            ]
        }
      }
    },
    methods: {
      login: function () {
        this.$refs['userForm'].validate((valid) => {
          if (!valid) {
            return
          }

          this.$http.post("/user/login",this.user).then(
              (res)=>{
                  if(res.data.success){
                      window.sessionStorage.setItem("user",JSON.stringify(res.data.result));
                      //组件跳转
                      this.$router.push('/userList');
                      this.$message.success(res.data.message);
                  }else {
                      this.$message.error(res.data.message)
                  }
              }
          )

        })
      },
      resetForm: function () {
        this.$refs['userForm'].resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }

</style>
